import { defineComponent, h, Ref, ref } from 'vue'
import {
  NButton,
  NCard,
  NDataTable,
  NForm,
  NFormItem,
  NInput,
  NPagination,
  NSelect,
  NSpace,
  NTag,
  useMessage
} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import styles from './index.module.scss'
import { DataItemType } from './types'
import { SearchFormType } from './types'
import { deleteRole, getRoleList } from '@/service/modules/system-role'
import create from './create'
import edit from './edit'
import info from './info'

const role = defineComponent({
  name: 'role',
  components: {
    create,
    edit,
    info
  },
  setup() {
    // @ts-ignore
    const dataList: DataItemType[] = ref([])

    const pagination = ref({
      pageSize: 10,
      pageCount: 0,
      page: 1,
      showQuickJumper: true,
      pageSizes: [10, 30, 50],
      showSizePicker: true,
      loading: false,
      onUpdatePage: (page: number) => {
        pagination.value.page = page
        handleList()
      },
      onUpdatePageSize: (pageSize: number) => {
        pagination.value.pageSize = pageSize
        pagination.value.page = 1
        handleList()
      }
    })

    const searchForm: Ref<SearchFormType> = ref({
      roleName: '',
      status: undefined
    })

    // @ts-ignore
    const statusOptions: SelectOptionsType = [
      {
        label: '启用',
        value: '0'
      },
      {
        label: '禁用',
        value: '1'
      }
    ]

    const submit = function () {
      handleList()
    }

    const reset = function () {
      searchForm.value.roleName = ''
      searchForm.value.status = ''
    }

    const createColumns = ({
      editData,
      // infoData,
      deleteData
    }: {
      editData: (rowData: DataItemType) => void
      deleteData: (rowData: DataItemType) => void
      // infoData: (rowData: DataItemType) => void
    }): DataTableColumns<DataItemType> => {
      return [
        { title: '角色名称', key: 'roleName' },
        {
          title: '数据权限',
          key: 'dataScope',
          render(row: any) {
            let scope = ''
            const DataScopeOptions = {
              '1': '全部数据权限',
              '2': '本人数据权限',
              '3': '本部门数据权限',
              '4': '本部门及以下数据权限'
            }
            // @ts-ignore
            scope = DataScopeOptions[row.dataScope]
            return scope
          }
        },
        {
          title: '状态',
          key: 'status',
          render(row: any) {
            return h(
              // @ts-ignore
              NTag,
              {
                type: row.status == 0 ? 'success' : 'error'
              },
              {
                default: () => (row.status == 0 ? '启用' : '禁用')
              }
            )
          }
        },
        { title: '创建人', key: 'createBy' },
        { title: '创建时间', key: 'createTime' },
        {
          title: '操作',
          key: 'operation',
          width: 240,
          render(row: any) {
            return h(
              NSpace,
              {},
              {
                default: () => {
                  return [
                    h(
                      NButton,
                      {
                        type: 'primary',
                        onClick: () => editData(row)
                      },
                      { default: () => '编辑' }
                    ),
                    // h(
                    //   NButton,
                    //   {
                    //     type: 'tertiary',
                    //     onClick: () => infoData(row)
                    //   },
                    //   { default: () => '查看' }
                    // ),
                    h(
                      NButton,
                      {
                        type: row.status == 0 ? 'error' : 'success',
                        onClick: () => deleteData(row)
                      },
                      { default: () => (row.status == 0 ? '禁用' : '启用') }
                    )
                  ]
                }
              }
            )
          }
        }
      ]
    }

    const message = useMessage()

    const handleList = function () {
      pagination.value.loading = true
      getRoleList(
        // @ts-ignore
        searchForm.value,
        pagination.value.page,
        pagination.value.pageSize
      )
        .then((res: any) => {
          // @ts-ignore
          dataList.value = res.totalList
          // @ts-ignore
          pagination.value.pageCount = Math.ceil(
            res.total / pagination.value.pageSize
          )
          pagination.value.loading = false
        })
        .catch((err: any) => {
          message.error(err.msg ? err.msg : '接口未知错误')
          pagination.value.loading = false
        })
    }

    handleList()

    const createModal = ref(false)
    const editModal = ref(false)
    const infoModal = ref(false)

    const createClick = function () {
      createModal.value = true
    }

    const editClick = function () {
      editModal.value = true
    }

    const infoClick = function () {
      infoModal.value = true
    }

    const handleModal = function (refush = false) {
      createModal.value = false
      editModal.value = false
      infoModal.value = true
      if (refush) {
        handleList()
      }
    }

    const itemData = ref()

    return {
      columns: createColumns({
        editData(rowData) {
          itemData.value = rowData
          editClick()
        },
        deleteData(rowData) {
          // @ts-ignore
          deleteRole(rowData.roleId, rowData.status).then(() => {
            handleList()
          })
        }
        // infoData(rowData) {
        //   itemData.value = rowData
        //   infoClick()
        // }
      }),
      dataList,
      pagination,
      searchForm,
      statusOptions,
      submit,
      reset,
      message,
      createModal,
      createClick,
      handleModal,
      editModal,
      editClick,
      itemData,
      infoModal,
      infoClick
    }
  },
  render() {
    return (
      <NSpace vertical>
        <NCard hoverable>
          <NForm
            label-width={'auto'}
            label-placement={'left'}
            model={this.searchForm}
            inline
          >
            <NFormItem label={'角色名称'} path={'roleName'}>
              <NInput
                v-model:value={this.searchForm.roleName}
                placeholder={'请输入角色名称'}
              ></NInput>
            </NFormItem>
            <NFormItem label={'状态'} path={'status'}>
              <NSelect
                class={styles['select-item']}
                v-model:value={this.searchForm.status}
                placeholder={'请选择状态'}
                // @ts-ignore
                options={this.statusOptions}
              ></NSelect>
            </NFormItem>
            <NFormItem>
              <NButton
                attr-type={'button'}
                type={'primary'}
                onClick={this.submit}
              >
                搜索
              </NButton>
            </NFormItem>
            <NFormItem>
              <NButton
                attr-type={'button'}
                type={'tertiary'}
                onClick={this.reset}
              >
                清空
              </NButton>
            </NFormItem>
          </NForm>
        </NCard>
        <NCard hoverable>
          <NCard bordered={false} size={'medium'}>
            <NButton
              attr-type={'button'}
              type={'primary'}
              onClick={this.createClick}
            >
              创建
            </NButton>
          </NCard>
          <NDataTable
            // @ts-ignore
            columns={this.columns}
            data={this.dataList}
            loading={this.pagination.loading}
          ></NDataTable>
          <NPagination
            class={styles['page-position']}
            display-order={['quick-jumper', 'pages', 'size-picker']}
            page-count={this.pagination.pageCount}
            page-size={this.pagination.pageSize}
            page-sizes={this.pagination.pageSizes}
            page={this.pagination.page}
            on-update:page={this.pagination.onUpdatePage}
            on-update:page-size={this.pagination.onUpdatePageSize}
            show-quick-jumper
            show-size-picker
          ></NPagination>
        </NCard>
        <create
          propModal={this.createModal}
          onCloseModal={this.handleModal}
          close-modal={this.handleModal}
        ></create>
        <edit
          propModal={this.editModal}
          onCloseModal={this.handleModal}
          close-modal={this.handleModal}
          itemData={this.itemData}
        ></edit>
      </NSpace>
    )
  }
})

export default role
